---
layout: default
title: "Button-group - Sleek Admin Dashboard Template"


parent: "components"
sub_parent: "components"
activePage: "button-group"
plugins: []
---
					<div class="breadcrumb-wrapper">
						<h1>Button Group</h1>
						{% include breadcrumb.htm %}
					</div>

					<div class="row">
						<div class="col-xl-6 ">
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Default Button Group</h2>
								</div>
								<div class="card-body">
									<p class="mb-5"> Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>. Read Bootstrap documentaion <a href="https://getbootstrap.com/docs/4.1/components/button-group/#basic-example"
										 target="_blank"> More Details.</a></p>
									<div class="btn-group" role="group" aria-label="Basic example">
										<button type="button" class="btn btn-primary ">Left</button>
										<button type="button" class="btn btn-primary ">Middle</button>
										<button type="button" class="btn btn-primary ">Right</button>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-6">
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Outline Square Button Group</h2>
								</div>
								<div class="card-body">
									<p class="mb-5"> For Outline Square Buttons With Dropdown add class <code> .btn-outline-primary</code></p>
									<div class="btn-group" role="group" aria-label="Basic example">
										<button type="button" class="btn btn-outline-primary">Left</button>
										<button type="button" class="btn btn-outline-primary">Middle</button>
										<button type="button" class="btn btn-outline-primary">Right</button>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-6">
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Icon Button Group</h2>
								</div>
								<div class="card-body">
									<p class="mb-5"> For Icon Button Group add <code> &lt;i class="mdi mdi-alert"&gt;&lt;/i&gt; </code> inside <code> &lt; button class="btn btn-primary"&gt; </code>.Get classes for material icon <a href="material-icon.html">here</a>.
									</p>
									<div class="btn-group" role="group" aria-label="Basic example">
										<button type="button" class="btn btn-primary">
											<i class="mdi mdi-alert mr-1"></i> Left</button>
										<button type="button" class="btn btn-primary">
											<i class="mdi mdi-alert mr-1"></i> Middle</button>
										<button type="button" class="btn btn-primary">
											<i class="mdi mdi-alert mr-1"></i> Right</button>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-6">
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Icon Button Group</h2>
								</div>
								<div class="card-body">
									<p class="mb-5"> For Icon Button Group add <code> &lt;i class="mdi mdi-alert"&gt;&lt;/i&gt; </code> inside <code> &lt; button class="btn btn-outline-primary"&gt; </code>. Get classes for material icon <a href="material-icon.html">here</a>.
									</p>
									<div class="btn-group" role="group" aria-label="Basic example">
										<button type="button" class="btn btn-outline-primary">
											<i class="mdi mdi-alert mr-1"></i> Left</button>
										<button type="button" class="btn btn-outline-primary">
											<i class="mdi mdi-alert mr-1"></i> Middle</button>
										<button type="button" class="btn btn-outline-primary">
											<i class="mdi mdi-alert mr-1"></i> Right</button>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-6">
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Button Toolbar pagination</h2>
								</div>
								<div class="card-body">
									<p class="mb-5"> Combine sets of button groups into button toolbars for more complex components. Read Bootstrap
										documentaion for <a href="https://getbootstrap.com/docs/4.1/components/button-group/#basic-example" target="_blank"> more
											details.</a></p>
									<div class="btn-toolbar " role="toolbar" aria-label="Toolbar with button groups">
										<div class="btn-group mr-2 mb-3" role="group" aria-label="First group">
											<button type="button" class="btn btn-primary">1</button>
											<button type="button" class="btn btn-primary">2</button>
											<button type="button" class="btn btn-primary">3</button>
											<button type="button" class="btn btn-primary">4</button>
										</div>
										<div class="btn-group mr-2 mb-3" role="group" aria-label="Second group">
											<button type="button" class="btn btn-primary">5</button>
											<button type="button" class="btn btn-primary">6</button>
											<button type="button" class="btn btn-primary">7</button>
										</div>
										<div class="btn-group mb-3" role="group" aria-label="Third group">
											<button type="button" class="btn btn-primary">8</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-6">
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Outline Button Toolbar pagination</h2>
								</div>
								<div class="card-body">
									<p class="mb-5"> For Outline Button Toolbar pagination add class <code> .btn-outline-primary</code>.</p>
									<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
										<div class="btn-group mr-2 mb-3" role="group" aria-label="First group">
											<button type="button" class="btn btn-outline-primary">1</button>
											<button type="button" class="btn btn-outline-primary">2</button>
											<button type="button" class="btn btn-outline-primary">3</button>
											<button type="button" class="btn btn-outline-primary">4</button>
										</div>
										<div class="btn-group mr-2 mb-3" role="group" aria-label="Second group">
											<button type="button" class="btn btn-outline-primary">5</button>
											<button type="button" class="btn btn-outline-primary">6</button>
											<button type="button" class="btn btn-outline-primary">7</button>
										</div>
										<div class="btn-group mb-3" role="group" aria-label="Third group">
											<button type="button" class="btn btn-outline-primary">8</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-6">
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Nesting</h2>
								</div>
								<div class="card-body">
									<p class="mb-5"> Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons. Read Bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.1/components/button-group/#basic-example" target="_blank"> more
											details.</a></p>
									<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
										<button type="button" class="btn btn-primary">1</button>
										<button type="button" class="btn btn-primary">2</button>

										<div class="btn-group" role="group">
											<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
											aria-haspopup="true" aria-expanded="false">
												Dropdown
											</button>
											<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
												<a class="dropdown-item" href="#">Dropdown link</a>
												<a class="dropdown-item" href="#">Dropdown link</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-6">
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Nesting Outline Button </h2>
								</div>
								<div class="card-body">
									<p class="mb-5"> For Outline Button add class <code> .btn-outline-primary</code>.</p>
									<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
										<button type="button" class="btn btn-outline-primary">1</button>
										<button type="button" class="btn btn-outline-primary">2</button>

										<div class="btn-group" role="group">
											<button id="btnGroupDrop1" type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"
											aria-haspopup="true" aria-expanded="false">
												Dropdown
											</button>
											<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
												<a class="dropdown-item" href="#">Dropdown link</a>
												<a class="dropdown-item" href="#">Dropdown link</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-6">
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Vertical Buttons</h2>
								</div>
								<div class="card-body">
									<p class="mb-5"> Make a set of buttons appear vertically. Read Bootstrap documentaion <a href="https://getbootstrap.com/docs/4.1/components/button-group/#vertical-variation" target="_blank"> More Details.</a></p>
									<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
										<button type="button" class="btn btn-primary">Button</button>
										<button type="button" class="btn btn-primary">Button</button>
										<div class="btn-group" role="group">
											<button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
											aria-haspopup="true" aria-expanded="false">
												Dropdown
											</button>
											<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
												<a class="dropdown-item" href="#">Dropdown link</a>
												<a class="dropdown-item" href="#">Dropdown link</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-6">
							<div class="card card-default">
								<div class="card-header card-header-border-bottom">
									<h2>Vertical Outline Buttons</h2>
								</div>
								<div class="card-body">
									<p class="mb-5"> For Vertical Outline Buttons add class <code> .btn-outline-primary</code>.</p>
									<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
										<button type="button" class="btn btn-outline-primary">Button</button>
										<button type="button" class="btn btn-outline-primary">Button</button>
										<div class="btn-group" role="group">
											<button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-primary dropdown-toggle"
											data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
												Dropdown
											</button>
											<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
												<a class="dropdown-item" href="#">Dropdown link</a>
												<a class="dropdown-item" href="#">Dropdown link</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
